<template>
  <div class="">
    <div class="select" @click="showPicker(0)" ref="select0">{{selectedText[0]}}</div>
    <div class="select" @click="showPicker(1)" ref="select1">{{selectedText[1]}}</div>
    <div class="select" @click="showPicker(2)" ref="select2">{{selectedText[2]}}</div>
    <picker @select="handleSelect(0,arguments)" :data="[data]" :cancelTxt="cn[0]" :confirmTxt="cn[1]" :selected-index="selectedIndex" ref="picker0"></picker>
    <citypicker @select="handleSelect(1,arguments)" :cancelTxt="cn[0]" :confirmTxt="cn[1]" :selected-index="selectedIndex2" ref="picker1"></citypicker>
    <datepicker @select="handleSelect(2,arguments)" :selected-index="selectedIndex3" :cancelTxt="cn[0]" :confirmTxt="cn[1]" :minDate="minDate" :maxDate="maxDate" ref="picker2"></datepicker>
    <div class="">
      {{s}}
    </div>
  </div>
</template>

<script>
import picker from '@/components/picker/picker'
import citypicker from '@/components/picker/citypicker'
import datepicker from '@/components/picker/datepicker'

export default {
  components: {
    picker,
    citypicker,
    datepicker
  },
  data() {
    return {
      s: 20,
      cn: ['取消','确定'],
      minDate: '',
      maxDate: '',
      selectedIndex: [0],
      selectedIndex2: [0,0,0],
      selectedIndex3: [1990-1900,new Date().getMonth(), new Date().getDate()-1],
      selectedText: [
        '','',''
      ],
      data: [
        {
         text: '剧毒',
         value: 1
       }, {
         text: '蚂蚁',
         value: 2
       },
       {
         text: '幽鬼',
         value: 3
       },
       {
         text: '主宰',
         value: 4
       },
       {
         text: '卡尔',
         value: 5
       },
       {
         text: '宙斯',
         value: 6
       },
       {
         text: '巫医',
         value: 7
       }, {
         text: '巫妖',
         value: 8
       },
       {
         text: '神谕者',
         value: 9
       },
       {
         text: '撼地神牛',
         value: 10
       },
       {
         text: '蓝胖子',
         value: 11
       },
       {
         text: '水晶室女',
         value: 12
       },
       {
         text: '莉娜',
         value: 13
       },
       {
         text: '斯拉克',
         value: 14
       },
       {
         text: '斯拉达',
         value: 15
       }
      ]
    }
  },
  computed: {

  },
   created() {
     this.count()
     const d = new Date()
     this.minDate = new Date(1900,1,1)
     this.maxDate = d
     // console.log(provinceList, cityList, areaList)
     // this.$refs.picker0.setData([this.data])
    // this.$refs.picker0.setSelectedIndex([1])
  },
  methods: {
    count () {
      if (this.s > 0) {
        var timer = setTimeout(() => {
          this.s --
          this.count()
        },1000)
      } else {
        clearTimeout(timer)
      }
    },
    handleSelect(index, args) {
        this.selectedText.splice(index, 1, args[2].join('，'))
        console.log(this.selectedText)
      },
    showPicker (index) {
      let picker = this.$refs['picker' + index]
      picker.show()
    }
  }
}
</script>

<style lang="stylus">
  .select
    background-color: #eee
    height: 50px
    width: 90%
    margin: 10px
</style>
